<template>
  <!-- <div :class="className" :style="{height:height,width:width}" /> -->
  <div style="height: 440px;">
    <div class="fontWeight biaoti" style="margin-bottom:80px;">支付渠道使用统计</div>
    <div style="height:300px;width:100%;" id="myChart_raddar">
      
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

const animationDuration = 3000

export default {
  mixins: [resize],
  // props: {
  //   className: {
  //     type: String,
  //     default: 'chart'
  //   },
  //   width: {
  //     type: String,
  //     default: '100%'
  //   },
  //   height: {
  //     type: String,
  //     default: '300px'
  //   }
  // },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      //this.chart = echarts.init(this.$el, 'macarons')
      this.chart = echarts.init(document.getElementById('myChart_raddar'), 'macarons')

      this.chart.setOption({
        title: {
          text: '单位：次',
          textStyle: {
              color: '#999',
              fontSize: '12px'
          }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // Use axis to trigger tooltip
                type: 'none'        // 'shadow' as default; can also be 'line' or 'shadow'
            }
        },
        grid: {
            left: '2%',
            right: '2%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            axisLabel: {
                  show: false,
            },
            splitLine:{
        　　　　show:false
        　　 },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            splitArea: {
                show: false
            },
        },
        yAxis: {
            type: 'category',
            data: ['微信', 'QQ钱包', '支付宝', '广发银企', '招商银企'],
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisLabel: {
              show: true,
              textStyle: {
                  color: '#333'
              }
           },
        },
        series: [
            {
                name: '次数',
                type: 'bar',
                barWidth: '18px',
                stack: 'total',
                label: {
                    show: true
                },
                itemStyle: {
                  normal: {
                      color: function(params) {
                          var colorList = ['#00e0b4','#ffb100', '#9040fd','#045aff','#ee2750'];
                          return colorList[params.dataIndex]
                      }
                  }
                },
                emphasis: {
                    focus: 'series'
                },
                data: [210, 220, 300, 380, 600],
                animationDuration: animationDuration
            }
        ]
      })
    }
  }
}
</script>
